<script setup lang="ts">
import { ref } from 'vue';

import banner from './img/banner.png';
import close from './img/close.png';
import collect from './img/collect.png';
import credit from './img/credit.png';
import delivery from './img/delivery.png';
import dj from './img/dj.png';
import guaranteeLogo from './img/guarantee-logo.png';
import guarantee from './img/guarantee.png';
import home from './img/home.png';
import hot from './img/hot.png';
import icon_dd from './img/icon_dd.png';
import money from './img/money.png';
import phone from './img/phone.png';
import rightb from './img/rightb.png';
import rightc from './img/rightc.png';
import rightp from './img/rightp.png';
import service from './img/service.png';
import swiper from './img/swiper.png';
import ticket from './img/ticket.png';
import ticket1 from './img/ticket1.png';
import tip from './img/tip.png';
import tiph from './img/tiph.png';
import zm from './img/zm.png';
import zp from './img/zp.png';
import bzLogo from './img/bzLogo.png';
import sd from './img/sd.png';

const swiperList = ref<any[]>([swiper, swiper, swiper, swiper, swiper, swiper]);
const currentNum = ref<number>(1);
const activeKey = ref<number>(0);
const change = e => {
  currentNum.value = e.current + 1;
};
const active = ref<number>(0);
const showTip = ref<boolean>(true);
const tabList = [
  {
    name: '商品详情',
  },
  {
    name: '租赁需知',
  },
  {
    name: '常见问题',
  },
];
const handleChangeTab = (index: number) => {
  activeKey.value = index;
};
const handleClick = () => { 
    my.navigateTo({url: '/pagesShop/productDetail/productDetail?id=1833693991505166337'});
};
</script>

<template>
  <page class="page" custom-overflow="visible">
    <view class="header">
      <view class="header-left">
        <u-image :show-loading="true" :src="icon_dd" width="58rpx" height="58rpx"></u-image>
        <view class="header-title">魅租机·生活号</view>
      </view>
      <view class="header-right">关注</view>
    </view>
    <view class="banner">
      <u-swiper
        :autoplay="false"
        height="482rpx"
        :indicator="{
          display: 'none',
        }"
        :list="swiperList"
        @change="change"
      ></u-swiper>
    </view>

    <view class="ticket">
      <view class="ticket-header">
        <view class="banner-tab">
          <view></view>
          <view class="banner-tab-center">
            <view
              @click="active = 0"
              class="banner-tab-center-title"
              :class="active === 0 ? 'active' : ''"
              >商品</view
            >
            <view
              @click="active = 1"
              class="banner-tab-center-title"
              :class="active === 1 ? 'active' : ''"
              >实拍图</view
            >
          </view>
          <view class="banner-tab-right">{{ currentNum }}/{{ swiperList.length }}</view>
        </view>
        <view class="ticket-header-box">
          <view class="ticket-header-top">
            <view class="ticket-header-top-content">
              <view class="ticket-header-top-content-left">
                <u-image
                  style="margin-right: 6rpx"
                  :show-loading="true"
                  :src="credit"
                  width="41rpx"
                  height="41rpx"
                ></u-image>
                <u-image :show-loading="true" :src="ticket" width="424rpx" height="50rpx"></u-image>
              </view>
              <view class="ticket-header-top-content-right">
                <view style="margin-right: 4rpx">成色</view>
                <u-image :show-loading="true" :src="tip" width="30rpx" height="30rpx"></u-image>
              </view>
            </view>
          </view>
          <view class="ticket-content">
            <view class="ticket-content-top">
              <view class="ticket-content-top-left">
                <u-image :show-loading="true" :src="ticket1" width="154rpx" height="36rpx"></u-image>
                <view class="ticket-content-energy"> 得能量167g </view>
              </view>
              <view class="ticket-content-top-right">
                <view>领用</view>
                <image
                  style="margin-left: 6rpx; margin-top: 2rpx; width:22rpx; height: 22rpx;"
                  :show-loading="true"
                  :src="rightc"
                ></image>
              </view>
            </view>
            <view class="price">
              <view class="price-box">
                <text class="price-box-unit">¥</text>
                <text class="price-box-int">19</text>
                <text class="price-box-decimal">.19</text>
                <text class="price-box-time">/天</text>
              </view>
              <view class="price-title">优惠价</view>
              <view class="price-original">￥12.09/天</view>
              <view> <image class="price-tip" :src="tiph"></image></view>
            </view>
            <view class="describe">
              <text class="describe-head">保正品 | 全新</text>
              <text
                >小米全网通-炫彩蓝色-高品质-高质-高品质高品质高品质高品质高品质高品质高品高品高</text
              >
            </view>
            <view class="describe-box">
              <view class="describe-box-head">
                <view class="describe-box-head-left">
                  <u-image :show-loading="true" :src="bzLogo" width="24rpx" height="24rpx"></u-image>
                  保正品
                </view>
                <view class="describe-box-head-right">租赁保障</view>
              </view>
              <view class="describe-box-tag">超值租</view>
              <view class="describe-box-tag">超级补贴</view>
              <view class="describe-box-tag">极速达</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="padding: 0 12rpx; margin-top: 20rpx">
      <view class="guarantee">
        <view class="guarantee-head">
          <view class="guarantee-head-left">
            <u-image :show-loading="true" :src="guaranteeLogo" width="184rpx" height="52rpx"></u-image>
            <view class="guarantee-head-title">隐私保护·安心租</view>
          </view>
          <view class="guarantee-head-right">
            <text>查看保障</text>
            <u-image
              style="margin-top: 2rpx"
              :show-loading="true"
              :src="rightp"
              width="32rpx"
              height="32rpx"
            ></u-image>
          </view>
        </view>
        <view class="guarantee-content">
          <view class="guarantee-content-left">
            <view class="guarantee-content-item">
              <u-image :show-loading="true" :src="dj" width="54rpx" height="54rpx"></u-image>
              <view class="guarantee-content-item-title">低价还补贴</view>
            </view>
            <view class="guarantee-content-item">
              <u-image :show-loading="true" :src="zp" width="54rpx" height="54rpx"></u-image>
              <view class="guarantee-content-item-title">品牌保真品</view>
            </view>
            <view class="guarantee-content-item">
              <u-image :show-loading="true" :src="zm" width="54rpx" height="54rpx"></u-image>
              <view class="guarantee-content-item-title">芝麻免押金</view>
            </view>
          </view>
          <view 
            style="margin-top: -48rpx">
          <u-image
            :show-loading="true"
            :src="guarantee"
            width="162rpx"
            height="166rpx"
          ></u-image></view>
        </view>
      </view>
      <view class="programme">
        <view class="programme-item">
          <view class="programme-item-left">保障</view>
          <view class="programme-item-right">
            <view class="programme-item-txt">芝麻信用免押 · 质检认证 · 随还随换</view>
            <u-image :show-loading="true" :src="rightb" width="33rpx" height="33rpx"></u-image>
          </view>
        </view>
        <view class="programme-item">
          <view class="programme-item-left">选择</view>
          <view class="programme-item-right">
            <view class="programme-item-txt">请选择：套餐；颜色；内存；租期</view>
            <u-image :show-loading="true" :src="rightb" width="33rpx" height="33rpx"></u-image>
          </view>
        </view>
        <view class="programme-item">
          <view class="programme-item-left">配送</view>
          <view class="programme-item-bottom">
            <u-image :show-loading="true" :src="delivery" width="120rpx" height="33rpx"></u-image>
            <view class="programme-item-txt">今天完成支付，明天安排发货</view>
          </view>
        </view>
      </view>
      <view 
        style="margin-top: 20rpx">
      <u-image
        :show-loading="true"
        :src="banner"
        width="100%"
        height="144rpx"
      ></u-image>
      </view>
      <view class="hot">
        <u-image :show-loading="true" :src="hot" width="134rpx" height="48rpx"></u-image>
        <view class="scroll-box">
          <view class="hot-wrap">
            <view class="hot-item" v-for="item in 10" :key="item">
              <image :src="phone" class="hot-item-pic"></image>
              <view class="hot-item-txt">苹果 15 Pro Max</view>
              <view class="hot-item-price">
                <text class="hot-item-price-unit">¥</text>
                <text class="hot-item-price-int">19</text>
                <text class="hot-item-price-decimal">.19</text>
                <text class="hot-item-price-time">/天</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="detail-tab">
      <u-tabs
        v-model="activeKey"
        lineColor="#FF2C2C"
        :activeStyle="{ color: '#333',fontWeight: 'bold',fontSize: '32rpx'}"
        lineWidth="70rpx"
        :list="tabList"
        @change="handleChangeTab"
        :itemStyle="{width: '33.33%', height: '44px'}"
      ></u-tabs>
    </view>
    <view :style="{ height: showTip ? '220rpx' : '140rpx' }"></view>
    <view class="footer">
      <view class="footer-tip" v-if="showTip">
        <view class="footer-tip-left">
          <u-image :show-loading="true" :src="money" width="66rpx" height="54rpx"></u-image>
          <view class="footer-tip-left-txt">租赁券·首月1元·</view>
          <view class="footer-tip-left-time">
            <view class="time-txt">22</view>
            <view class="time-symbol">:</view>
            <view class="time-txt">24</view>
            <view class="time-symbol">:</view>
            <view class="time-txt">29</view>
          </view>
        </view>
        <image
          @click="showTip = false"
          :show-loading="true"
          :src="close"
          style="width: 20rpx; height: 20rpx"
        ></image>
      </view>
      <view class="footer-box">
        <view class="footer-box-left">
          <view class="footer-btn-box">
            <u-image :show-loading="true" :src="home" width="44rpx" height="44rpx"></u-image>
            <view class="footer-btn-txt">首页</view>
          </view>
          <view class="footer-btn-box">
            <u-image :show-loading="true" :src="service" width="44rpx" height="44rpx"></u-image>
            <view class="footer-btn-txt">客服</view>
          </view>
          <view class="footer-btn-box">
            <u-image :show-loading="true" :src="collect" width="44rpx" height="44rpx"></u-image>
            <view class="footer-btn-txt">收藏</view>
          </view>
        </view>
        <view class="footer-btn" @click="handleClick">
          <u-image :show-loading="true" :src="sd" width="38rpx" height="38rpx"></u-image> 
          <view style="margin-left:4rpx;">立享免押 | 1元下单</view>
        </view>
      </view>
    </view>
  </page>
</template>
<style lang="scss" scoped>
.banner {
  :deep(.u-swiper-indicator) {
    display: none !important; /* 根据需求设置具体的高度 */
  }
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 24rpx;
  background: #fff;
  &-left {
    display: flex;
    align-items: center;
  }
  &-title {
    margin-left: 20rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #333333;
    text-align: left;
  }
  &-right {
    width: 111rpx;
    height: 53rpx;
    background: linear-gradient(180deg, #333333 0%, #131313 100%);
    border-radius: 27rpx 27rpx 27rpx 27rpx;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
    text-align: center;
    line-height: 53rpx;
  }
}
.ticket {
  &-header {
    background: linear-gradient(180deg, #ffffff 0%, #eff1f3 100%);
    &-box {
      padding: 0 12rpx;
    }
    &-top {
      box-sizing: border-box;
      padding: 16rpx;
      height: 276rpx;
      background: linear-gradient(180deg, #ff232f 0%, #ff4d4d 100%);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      &-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        &-left {
          display: flex;
          align-items: center;
        }
        &-right {
          display: flex;
          align-items: center;
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #ffffff;
        }
      }
    }
  }
  &-content {
    margin-top: -196rpx;
    margin-right: -2rpx;
    margin-left: -2rpx;
    padding: 20rpx;
    background: linear-gradient(180deg, #fedfe2 0%, #ffffff 100%);
    border-radius: 20rpx;
    border: 2rpx solid #ffffff;
    &-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-left {
        display: flex;
      }
      &-right {
        width: 100rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        padding-left: 15rpx;
        background: #333333;
        border-radius: 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #ffffff;
      }
    }
    &-energy {
      margin-left: 15rpx;
      padding-right: 10rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 22rpx;
      color: #1c1c1c;
      text-align: right;
      width: 162rpx;
      height: 37rpx;
      background: url('./img/ticket2.png');
    background-size: 100% 100%;
      line-height: 37rpx;
    }
  }
}
.price {
  margin-top: 8rpx;
  display: flex;
  align-items: center;
  &-box {
    display: flex;
    align-items: flex-end;
    color: #ff2c35;
    &-unit {
      font-size: 22rpx;
    }
    &-int {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 26rpx;
    }
    &-decimal {
      font-size: 24rpx;
      font-weight: bold;
    }
    &-time {
      font-size: 24rpx;
    }
  }
  &-title {
    margin-left: 10rpx;
    padding-left: 20rpx;
    width: 100rpx;
    height: 36rpx;
    line-height: 36rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    color: #f43139;
    background: url('./img/special.png');
    background-size: 100% 100%;
  }
  &-original {
    margin-left: 14rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 20rpx;
    color: #999999;
    text-align: left;
    font-style: normal;
    text-decoration-line: line-through;
    text-transform: none;
  }
  &-tip {
    margin-left: 4rpx;
    margin-top: 12rpx;
    width: 24rpx;
    height: 24rpx;
  }
}
.banner-tab {
  position: relative;
  padding: 12rpx 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 4rpx 8rpx;
    display: flex;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    color: #c1c1c1;
    background: #f1f1f1;
    border-radius: 40rpx;
    &-title {
      padding: 10rpx 13rpx;
    }
    .active {
      background: #fff;
      color: #000000;
      border-radius: 40rpx;
    }
  }
  &-right {
    padding: 10rpx 20rpx;
    background: rgba(0, 0, 0, 0.2);
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 24rpx;
    color: #ffffff;
    border-radius: 40rpx;
  }
}
.describe {
  margin-top: 8rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 30rpx;
  color: #2e3139;
  &-head {
    position: relative;
    top: -4rpx; 
    margin-right: 10rpx;
    padding: 2rpx 10rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 21rpx;
    color: #7e3916;
    background: #ffffff;
    border-radius: 6rpx;
  }
  &-box {
    margin-top: 8rpx;
    display: flex;
    align-items: center;
    &-tag {
      margin-left: 10rpx;
      padding: 0 14rpx;
      height: 32rpx;
      line-height: 32rpx;
      border-radius: 4rpx;
      border: 1rpx solid #d9c7b2;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 22rpx;
      color: #8c6c42;
    }
    &-head{
      display:flex; 
      align-items: center;
      height: 32rpx;
      line-height: 32rpx;
      border-radius: 4rpx;
      border: 1rpx solid #d9c7b2;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 22rpx;
      &-left{
        padding: 0 4rpx;
        display:flex;
        align-items: center;
        background: #C1925C;
        border-radius: 4rpx ;
        color: #fff;
      line-height: 32rpx;
      }
      &-right{
        padding: 0 4rpx;
        display:flex;
        align-items: center;
        color: #8c6c42;
      line-height: 32rpx;
      }
    }
  }
}
.guarantee {
  background: #ffffff;
  border-radius: 20rpx;
  padding-top: 14rpx;
  padding-left: 24rpx;
  &-head {
    padding-right: 20rpx;
    display: flex;
    justify-content: space-between;
    &-left {
      display: flex;
      align-items: center;
    }
    &-title {
      margin-left: 20rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #999999;
    }
    &-right {
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
    }
  }
  &-content {
    display: flex;
    justify-content: space-between;
    &-left {
      display: flex;
      align-items: center;
    }
    &-item {
      margin-right: 40rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      &-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #999999;
      }
    }
  }
}
.programme {
  margin-top: 20rpx;
  background: #ffffff;
  border-radius: 20rpx;
  &-item {
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    &-left {
      margin-right: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #666666;
    }
    &-right {
      padding: 20rpx;
      padding-left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      border-bottom: 1rpx solid #eeeeee;
    }
    &-txt {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #2e3139;
    }
    &-bottom {
      padding: 20rpx;
      padding-left: 0;
      flex: 1;
      display: flex;
      align-items: center;
    }
  }
}
.hot {
  margin-top: 20rpx;
  padding-left: 20rpx;
  padding-top: 20rpx;
  padding-bottom: 12rpx;
  background: #fff;
  border-radius: 20rpx;
  &-wrap {
    display: flex;
    overflow-x: scroll;
  }
  &-item {
    flex-shrink: 0;
    width: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-pic {
      width: 148rpx;
      height: 148rpx;
    }
    &-txt {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 21rpx;
      color: #000000;
    }
    &-price {
      font-family: PingFang SC, PingFang SC;
      color: #ff343c;
      color: #ff2c35;
      &-unit {
        font-size: 18rpx;
      }
      &-int {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 26rpx;
      }
      &-decimal {
        font-size: 18rpx;
        font-weight: bold;
      }
      &-time {
        font-size: 18rpx;
      }
    }
  }
}
.scroll-box {
  margin-top: 10rpx;
  overflow: hidden;
  width: 100%;
}
.detail-tab {
  margin-top: 20rpx;
  background:#fff;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  &-tip {
    padding: 14rpx 30rpx 14rpx 14rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #faebee;
    &-left {
      flex: 1;
      display: flex;
      align-items: center;
      &-txt {
        margin-left: 10rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #333333;
      }
      &-time {
        margin-left: 10rpx;
        display: flex;
        align-items: center;
      }
    }
  }
}
.time-txt {
  padding: 4rpx 10rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 24rpx;
  color: #ffffff;
  background: #ff3243;
  border-radius: 6rpx;
}
.time-symbol {
  margin: 0 10rpx;
  font-weight: bold;
  color: #ff3243;
}
.footer-box {
  padding: 16rpx 24rpx 18rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &-left {
    flex: 1;
    display: flex;
  }
}
.footer-btn {
  &-box {
    margin-right: 20rpx;
    width: 68rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  &-txt {
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 22rpx;
    color: #5d6270;
  }
}
.footer-btn{
  padding-left: 34rpx;
  padding-right: 46rpx;
  height: 87rpx;
  display: flex;
  align-items: center;
  border-radius: 44rpx;
  background: #FF1717;
  font-family: PingFang SC, PingFang SC;
  font-weight: bold;
  font-size: 34rpx;
  color: #FFFFFF;
}
</style>
